<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>go Password Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="go password manager">

    <!-- Le styles -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="/bootstrap/favicon.ico">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">Password Manager</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="/">Home</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="span12" >
          <form class="form-horizontal" action="/get" method="POST" onsubmit="getSha256();">
            <fieldset>
              <div class="control-group">
                <label class="control-label" for="ajaxSearch">Keywords</label>
                <div class="controls">
                  <input id="ajaxSearch" name="ajaxSearch" type="text" class="input-xxlarge">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="masterpassword">Master Passwords</label>
                <div class="controls">
                  <input id="masterpassword" name="masterpassword" type="password" class="input-large" placeholder="Master Password">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="maxLen">Password Length</label>
                <div class="controls">
                  <input id="maxLen" name="maxLen" type="text" class="input-mini" value="16">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <button type="submit" class="btn btn-primary" id="IDSubmit" name="IDSubmit">GO</button>
                </div>
              </div>
              <input id="existID" name="existID" type="hidden">
            </fieldset>
          </form>
        </div>
      </div>

      <div class="row">
        <div class="span12" id="resultTableController">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Keywords</th>
                <th width="15%">Create Time</th>
                <th width="5%">Delete</th>
              </tr>
            </thead>
            <tbody id="resultTable">
            </tbody>
          </table>
        </div>
      </div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script> google.load("jquery", "1.7.1"); </script>
    <script src="/bootstrap/sha256.js"></script>

    <script>
      function copyToClipboard (text) {
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
      }

      var getSha256 = function() {
        var output = CryptoJS.SHA256($("#masterpassword").val());
        $("#masterpassword").val(output);
      };

      var ajaxSearchCallback = function(res, stat, xhr) {
        var data = eval('(' + res + ')');

        if (data.length == 0) { // No password found.
          $("#resultTable").children().remove();
          $("#existID").val("");
          $("#IDSubmit").removeClass("btn-success");
          $("#IDSubmit").addClass("btn-danger");
        } else {
          $("#IDSubmit").removeClass("btn-danger");
          $("#IDSubmit").addClass("btn-success");
          $("#resultTable").children().remove();
          for (x = 0; x < data.length; x++) {
            if (x == 0) {
              $("#existID").val(data[x].RandomID);
            }

            var tr = "<tr>";
            if (x == 0) {
              tr += '<div class="alert alert-info"><td>' + data[x].Keyword + "</td></div>";
            } else {
              tr += "<td>" + data[x].Keyword + "</td>";
            }
            tr += "<td>" + data[x].Date + "</td>";
            tr += "<td><a href='del?RandomID=" + data[x].RandomID + "'>Delete</a></tr>";
            $("#resultTable").append(tr);
          }
        }
      }

      var prevText = "7289347897952893149808120394890123757893457897891234"; // Prevent send for Ctrl and Alt Key.
      var ajaxSearchSender = function() {
        var text = $("#ajaxSearch").val();
        if (text != prevText) {
          prevText = text;
          var data = { text:text };
          $.ajax({type:"GET", url:"/go",
            data:data,
            success:ajaxSearchCallback
          });
        }
      };
      $("#ajaxSearch").keyup(ajaxSearchSender);

      var readyFuncs = function() {
        $("#ajaxSearch").focus();
        ajaxSearchSender();
      }
      $(document).ready(readyFuncs);
    </script>
  </body>
</html>


